<!--
 * @Author: XieQiu 雪球
 * @Date: 2021-05-09 11:07:23
 * @LastEditTime: 2023-07-10 10:43:17
 * @LastEditors: Please set LastEditors
 * @Description: 员工管理页面
-->
<template>
  <BaseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="76"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :has-edit="false"
        :has-save="false"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel('formData')"
        @edit="edit"
        @del="del"
        @save="save('formData')"
      />
    </template>
    <template v-slot:tab-select>
      <SelectButton @topitemtype="topitemtype" />
    </template>
    <template v-slot:search-box>
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search"
        @departmentPostChange="departmentPostChange"></SearchForm>
    </template>
    <template v-slot:table-box>
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="88%"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="person.name" label="姓名" />
        <el-table-column prop="person.gender" label="性别" />
        <el-table-column
          prop="person.phone"
          label="手机号"
          :formatter="formatter"
        />
        <el-table-column prop="person.landline" label="座机号">
          <template
            v-if="scope.row.employeeNo"
            slot-scope="scope"
          >{{ scope.row.person['landline'] !== undefined ? scope.row.person.landline : '————' }}</template>
        </el-table-column>
        <el-table-column prop="department.departmentName" label="部门">
          <template
            v-if="scope.row.employeeNo"
            slot-scope="scope"
          >{{ scope.row.department !== undefined ? scope.row.department.departmentName : '————' }}</template>
        </el-table-column>
        <el-table-column prop="post.postName" label="岗位">
          <template
            v-if="scope.row.employeeNo"
            slot-scope="scope"
          >{{ scope.row.post !== undefined ? scope.row.post.postName : '————' }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-if="scope.row.employeeNo" slot-scope="scope">
            <span>
              <!-- :disabled="topitemtypeid === 1 ? false : true" -->
              <el-switch
                v-model="scope.row.status"
                :active-value="true"
                :inactive-value="false"
                @change="faciStatus(scope.row)"
              />
            </span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作">
          <template v-if="scope.row.employeeNo" slot-scope="scope">
            <el-button
              v-if="judgePermission(76, 'edit')"
              class="text-btn-cursor"
              type="text"
              size="small"
              @click="edit"
            >
              <i class="el-icon-edit-outline"></i> 修改
            </el-button>
            <el-button
              v-if="judgePermission(76, 'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="handleDelete(scope.row.employeeNo)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:dialog>
      <el-dialog :title="titleText + '员工信息'" :visible.sync="dialogFormVisible">
        <el-form
          ref="formData"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
        >
          <el-form-item label="姓名:" prop="name" class="w50p">
            <el-input v-model="formData.name" placeholder="请输入员工姓名" clearable />
          </el-form-item>
          <el-form-item label="性别:" prop="gender" class="w50p">
            <el-select v-model="formData.gender" filterable clearable>
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
              <!-- <el-option label="无" value="无" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone" class="w50p">
            <el-input
              v-model="List.phone"
              placeholder="请输入手机号"
              clearable
              @input="tuominSave('phone')"
            />
            <el-input
              v-model="formData.phone"
              placeholder="请输入手机号"
              clearable
              style="display:none"
            />
          </el-form-item>
          <el-form-item label="身份证号:" prop="identificationNumber" class="w50p">
            <!-- <el-input
              v-model="formData.identificationNumber"
              placeholder="身份证号"
            />-->

            <el-input
              v-model="List.identificationNumber"
              placeholder="请输入身份证号"
              clearable
              @input="tuominSave('identificationNumber')"
            />
            <!--
                @blur="tuominChange('identificationNumber')"
            @focus="tuominFocus('identificationNumber')"-->
            <el-input
              v-model="formData.identificationNumber"
              style="display:none"
            />
          </el-form-item>
          <!-- <el-form-item class="w50p"> -->
          <el-form-item label="部门:" prop="departmentNo" class="w50p">
            <el-select
              v-model="formData.departmentNo"
              placeholder="请选择部门"
              filterable
              clearable
              @change="departmentPost"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.departmentNo"
                :label="item.departmentName"
                :value="item.departmentNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="岗位:" prop="postNo" class="w50p">
            <el-select
              ref="postName"
              v-model="formData.postNo"
              placeholder="请选择岗位"
              filterable
              clearable
            >
              <el-option
                v-for="item in stationList"
                :key="item.postNo"
                :label="item.postName"
                :value="item.postNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="座机号:" prop="landline" class="w50p">
            <el-input
              v-model="formData.landline"
              placeholder="请输入座机号"
              clearable
            />
          </el-form-item>
          <!-- </el-form-item> -->
          <el-form-item label="邮箱:" prop="email" class="w50p">
            <el-input
              v-model="formData.email"
              type="email"
              placeholder="请输入邮箱"
              clearable
            />
          </el-form-item>
          <el-form-item label="微信:" prop="weChat" class="w50p">
            <el-input v-model="formData.weChat" placeholder="请输入微信" clearable />
          </el-form-item>
          <el-form-item label="住址:" prop="address" class="w50p">
            <el-input v-model="formData.address" placeholder="请输入住址" clearable />
          </el-form-item>
          <el-form-item label="生日:" prop="birthday" class="w50p">
            <el-date-picker
              v-model="formData.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择生日日期"
              clearable
              filterable
            />
          </el-form-item>
        </el-form>
        <div v-if="nowChanceStau !== ''" slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">取 消</el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="save('formData')"
          >保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import SearchForm from '@/components/searchForm';
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import basicInfoManage from "@/api/digital-operation/personnel-cost-mansge/staff-manage";
import departmentManage from "@/api/basic-info-manage/department-manage";
import stationManage from "@/api/basic-info-manage/station-manage";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot";
import SelectButton from "./selcetButton/index.vue";
import { mymixin } from "@/utils/mixins";
import { desensitizedPhone, desensitizedIdNo } from "@/utils/desensitized";
import { mapGetters } from "vuex";
// import baseURL from "@/api/baseURL"
export default {
  name: "StaffManage",
  components: { SearchForm, ActionBar, Pagination, BaseMainSlot, SelectButton },
  mixins: [mymixin],
  data() {
    // var checkIdentitytionId = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("身份证号不能为空"));
    //   }
    //   if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
    //     callback(new Error("你输入的身份证长度或格式错误"));
    //   }
    //   // 身份证城市
    //   var aCity = {
    //     11: "北京",
    //     12: "天津",
    //     13: "河北",
    //     14: "山西",
    //     15: "内蒙古",
    //     21: "辽宁",
    //     22: "吉林",
    //     23: "黑龙江",
    //     31: "上海",
    //     32: "江苏",
    //     33: "浙江",
    //     34: "安徽",
    //     35: "福建",
    //     36: "江西",
    //     37: "山东",
    //     41: "河南",
    //     42: "湖北",
    //     43: "湖南",
    //     44: "广东",
    //     45: "广西",
    //     46: "海南",
    //     50: "重庆",
    //     51: "四川",
    //     52: "贵州",
    //     53: "云南",
    //     54: "西藏",
    //     61: "陕西",
    //     62: "甘肃",
    //     63: "青海",
    //     64: "宁夏",
    //     65: "新疆",
    //     71: "台湾",
    //     81: "香港",
    //     82: "澳门",
    //     91: "国外"
    //   };
    //   if (!aCity[parseInt(value.substr(0, 2))]) {
    //     callback(new Error("你的身份证地区错误"));
    //   }
    //   // 出生日期验证
    //   var sBirthday = (
    //     parseInt(value.substr(6, 4)) +
    //     "-" +
    //     Number(value.substr(10, 2)) +
    //     "-" +
    //     Number(value.substr(12, 2))
    //   ).replace(/-/g, "/");
    //   var d = new Date(sBirthday);
    //   if (
    //     sBirthday !==
    //     d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
    //   ) {
    //     callback(new Error("身份证上的出生日期错误"));
    //   }

    //   // 身份证号码校验
    //   var sum = 0;
    //   var weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    //   var codes = "10X98765432";
    //   for (var i = 0; i < value.length - 1; i++) {
    //     sum += value[i] * weights[i];
    //   }
    //   var last = codes[sum % 11]; // 计算出来的最后一位身份证号码
    //   if (value[value.length - 1] !== last) {
    //     callback(new Error("你输入的身份证号错误"));
    //   }
    //   callback();
    // };
    var checkIdentitytionId = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (value === "" || value === undefined || value === null) {
        callback();
      } else {
        if (!reg.test(value) && value !== "") {
          callback(new Error("请输入正确的身份证号码"));
        } else {
          callback();
        }
      }
    };
    return {
      formConfig: [
        {
          label: '部门',
          prop: 'departmentNo',
          type: 'select',
          change: 'departmentPostChange',
          options: [], // departmentList
          optionKey: { label: 'departmentName', value: 'departmentNo' },
        }, {
          label: '岗位',
          prop: 'postNo',
          type: 'select',
          options: [], // stationList
          optionKey: { label: 'postName', value: 'postNo' },
        },
      ],
      searchlist: {},
      obj: {
        name: ""
      },
      // 员工姓名
      employeeNo: "",
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      selectedStaffList: [],
      departmentList: [],
      stationList: [],
      // 存储一份
      stationLists: [],
      postName: "",
      postId: "",
      files: {},
      upLoading: false,
      downLoading: false,
      formData: {
        person: {}
      },
      departmentNo: "",
      postNo: "",
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            pattern: /[a-z]|[A-Z]|[\u4e00-\u9fa5]/g,
            message: "请输入中/英文",
            trigger: "blur"
          }
        ],
        identificationNumber: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          { validator: checkIdentitytionId, trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }]
      },
      topitemtypestu: true,
      // 脱敏 start
      List: {}
      // 脱敏 end
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  created() {
    this.getDepartmentList();
    // this.departmentPost();
  },
  mounted() {
    // 查询部门
    // 获取表格数据
  },
  methods: {
    topitemtype(e) {
      this.topitemtypestu = e;
      this.search();
    },
    getTableDataList() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          // name: this.name,
          departmentNo: this.searchlist.departmentNo || undefined,
          postNo: this.searchlist.postNo || undefined,
          organizationNo: sessionStorage.organizationNo,
          status: this.topitemtypestu
        }
      };
      basicInfoManage.getStaffList(params).then(res => {
        this.loading = false;
        let data = res.data;
        // 赋值总条数
        if (data) {
          this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data.content;
          // console.log(this.tableData)
          this.addblankmet();
          this.resetActionBar();
        }
      });
    },
    // 获取部门
    getDepartmentList() {
      departmentManage.getDepartmentListByCondition().then(res => {
        let data = res.data;
        this.departmentList = data;
        this.setOptions(this.formConfig, 'departmentNo', data)
        // console.log(this.ipmentType);
      });
    },
    departmentPostChange(formData) {
      this.setOptions(this.formConfig, 'postNo', [])
      // this.searchlist.postNo = ''
      if (formData.departmentNo) {
        stationManage
          .getPostListByCondition({
            departmentNo: formData.departmentNo,
            organizationNo: sessionStorage.organizationNo
          })
          .then(res => {
            let data = res.data;
            this.setOptions(this.formConfig, 'postNo', data)
          });
      } else {
        this.setOptions(this.formConfig, 'postNo', [])
      }
    },
    // 获取岗位
    departmentPost(val) {
      // console.log(val)
      this.$set(this.formData, "postNo", "");
      this.stationList = [];
      if (val) {
        stationManage
          .getPostListByCondition({
            departmentNo: val,
            organizationNo: sessionStorage.organizationNo
          })
          .then(res => {
            let data = res.data;
            this.stationList = data;
          });
      } else {
        this.stationList = [];
      }
    },
    // 点击导出搜索的数据
    async ExpensesDownExcel() {
      this.downLoading = true;
      let params = {
        // name: this.employeeNo,
        organizationName: sessionStorage.organizationName
      };
      let param = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          employeeNo: this.employeeNo
        }
      };
      // let data = params
      const data = await basicInfoManage.employeeExpensesDownExcel(params);
      // if (params.employeeId || params.startTime && params.endTime) {
      // let tableDataList = []
      const { data: res } = await basicInfoManage.getStaffList(param);
      // console.log(res)
      if (!res.content.length > 0) return this.$message.warning("暂无导出数据");
      this.downLoading = false;
      const blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      const link = document.createElement("a");
      link.download = `员工信息表-${this.dateToFormat(new Date())}.xlsx`;
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      // } else if (!params.employeeId || !params.startTime && !params.endTime) {
      // this.$message.warning('请选择名称或者时间!')
      // }
    },
    beforeUpload(file) {
      // console.log(file,'文件');
      this.files = file;
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2) {
        this.$message.warning("上传模板只能是 xls、xlsx格式!");
        return;
      }
      if (!isLt5M) {
        this.$message.warning("上传模板大小不能超过 5MB!");
        return;
      }
      this.fileName = this.files.name;
      setTimeout(() => {
        this.submitUpload();
        this.upLoading = true;
      }, 500);
      return false; // 返回false不会自动上传
    },

    // 上传excel
    async submitUpload() {
      if (this.fileName === "") {
        this.$message.warning("请选择要上传的文件！");
        return false;
      }
      let fileFormData = new FormData();
      // fileFormData.append("code", "t_pathology_info_excel");
      // fileFormData.append("description", "excel上传测试");
      // filename是键，file是值，就是要传的文件
      fileFormData.append("file", this.files, this.fileName);
      // 执行上传excel
      // console.log(Promise.resolve(basicInfoManage.employeeImportExcel(fileFormData)))
      // const { data: res } = await
      basicInfoManage.employeeImportExcel(fileFormData).then(resp => {
        if (resp.code === 1) {
          this.$message.success(resp.msg || "上传成功！");
          this.upLoading = false;
          this.getTableDataList();
        } else {
          this.$message.error(resp.msg || "上传失败！");
        }
      });
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit(row) {
      // TODO 点击行元素后 edit
      this.formData = JSON.parse(JSON.stringify({ ...row, ...row.person }));
      // this.List = JSON.parse(JSON.stringify({ ...row, ...row.person }));

      this.$set(
        this.List,
        "identificationNumber",
        desensitizedIdNo(row.person.identificationNumber)
      );
      this.$set(this.List, "phone", desensitizedPhone(row.person.phone));
      // this.$set(this.formData, 'departmentNo', row.departmentNo)
      this.$set(this.formData, "departmentNo", row.departmentNo);
      this.$set(this.formData, "postNo", row.postNo);
      // this.formData.employeeId = row.employeeId;

      if (row.departmentNo) {
        stationManage
          .getPostListByCondition({
            departmentNo: row.departmentNo,
            organizationNo: sessionStorage.organizationNo
          })
          .then(res => {
            let data = res.data;
            this.stationList = data;
          });
      }
      this.editActive = true;
      this.saveActive = false;
      this.cancelActive = true;
      this.canInput = false;
      // this.$refs.formData.resetFields();
    },
    handleSelectionChange(list) {
      this.selectedStaffList = [];
      this.selectedStaffList = list.map(item => item.employeeNo);
      if (this.selectedStaffList.length > 0) this.delActive = true;
      else this.delActive = false;
      // 多个处理为单个数据
      if (this.selectedStaffList.length > 1) {
        this.$message.warning("员工不可多选删除！");
        return;
      } else {
        this.selectedStaffList.splice(0, this.selectedStaffList.length - 1);
      }
    },
    delmessage() {
      if (this.selectedStaffList.length > 1) {
        // this.$message.warning("员工不可多选删除！");
        return;
      } else {
        basicInfoManage.delListStaffById(this.selectedStaffList).then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.getTableDataList();
          } else {
            this.$message.warning(res.msg || "删除失败");
          }
        });
        // this.selectedStaffList.splice(0, this.selectedStaffList.length - 1);
      }
    },
    handleDelete(val) {
      // basicInfoManage.delStaffById(val).then(res => {
      //   if (res.code === 1) {
      //     this.$message.success(res.msg);
      //     this.getTableDataList();
      //   } else {
      //     this.$message.warning(res.msg || "删除失败");
      //   }
      // });
      // this.selectedStaffList.splice(0, this.selectedStaffList.length - 1);
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          basicInfoManage.delStaffById(val).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.getTableDataList();
            } else {
              this.$message.warning(res.msg || "删除失败");
            }
          });
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    faciStatus(e) {
      basicInfoManage
        .editStaffInfo({ status: e.status, employeeNo: e.employeeNo })
        .then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg || "修改成功！");
            // this.postId = "";
            this.getTableDataList();
            // this.$refs[formData].resetFields();
          } else {
            this.$message.error(res.msg || "修改失败！");
          }
        });
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            // 编辑接口
            // 巡检点数组赋值进formData
            let formData = { ...this.formData };
            let person = { ...this.formData };
            delete person.person;
            delete person.department;
            delete person.post;
            formData.postNo = this.formData.postNo;
            formData.departmentNo = this.formData.departmentNo;
            formData.person = person;
            basicInfoManage.editStaffInfo(formData).then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg || "修改成功！");
                // this.postId = "";
                this.getTableDataList();
                this.$refs[formData].resetFields();
              } else {
                this.$message.error(res.msg || "修改失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            // 新增接口
            this.formData.organizationNo = sessionStorage.organizationNo;
            // this.formData.postId = this.postId;
            // this.formData.postName = this.postName;
            let formData = {};
            let person = { ...this.formData };
            formData.postNo = this.formData.postNo;
            formData.departmentNo = this.formData.departmentNo;
            formData.organizationNo = sessionStorage.organizationNo;
            formData.person = person;
            basicInfoManage.addStaffInfo(formData).then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg || "新增成功！");
                // this.postId = "";
                this.getTableDataList();
                this.$refs[formData].resetFields();
              } else {
                this.$message.error(res.msg || "新增失败！");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 脱敏 start
    formatter(e) {
      // console.log(typeof e.person.phone)
      if (e.person && e.person.phone) {
        return desensitizedPhone(e.person.phone);
      }
    },
    // 脱敏-将数据从List对象保存到用于存储的tuomin对象中
    tuominSave(type) {
      switch (type) {
        case "name":
          this.formData.clientName = this.List.clientName;
          break;
        case "identificationNumber":
          // this.formData.identificationNumber = this.List.identificationNumber
          this.$set(
            this.formData,
            "identificationNumber",
            this.List.identificationNumber
          );
          break;
        case "phone":
          this.$set(this.formData, "phone", this.List.phone);
          // this.formData.clientPhone = this.List.clientPhone
          break;
      }
    },
    // 脱敏-将用于展示的input里的数据转化成脱敏
    tuominChange(type) {
      switch (type) {
        case "name":
          this.List.clientName = this.setName2(
            this.List.clientName ? this.List.clientName : ""
          );
          break;
        case "identificationNumber":
          this.List.identificationNumber = desensitizedIdNo(
            this.List.identificationNumber ? this.List.identificationNumber : ""
          );
          break;
        case "phone":
          this.List.clientPhone = this.setTel(
            this.List.clientPhone ? this.List.clientPhone : ""
          );
          break;
      }
    },
    // 脱敏-修改时触发焦点，将清空里面的值，方便重新填写
    tuominFocus(type) {
      // if (this.statusDialog === 2) { // 处于修改状态
      //   switch (type) {
      //     case "name":
      //       this.List.clientName = ''
      //       console.log("清除name")
      //       break;
      //     case "identificationNumber":
      //       this.List.identificationNumber = ''
      //       console.log("清除cert")
      //       break;
      //     case "phone":
      //       this.List.clientPhone = ''
      //       console.log("清除phone")
      //       break;
      //   }
      // } else {
      // console.log(this.List)
      // console.log(this.formData)
      // }
    }

    // 脱敏 end
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
// .staff-manage {
//   width: 100%;
//   height: 100%;
::v-deep .el-form-item__content {
  // display: flex;
  justify-content: space-between;
}
::v-deep .el-form-item__label {
  min-width: 100px !important;
  text-align: end;
}
// }
// }
.DownExcel {
  margin-left: 20px;
  // background-color: #03bfef;
  // // border: 1px solid ;
}
::v-deep .pull-right {
  // height: 28px;
  // margin-left: 10px;
  .upload-demo {
    height: 100%;
    .el-upload {
      height: 100%;
      .el-button {
        height: 100%;
      }
    }
  }
}
</style>
